/*
 * @Descripttion: 登陆页面
 * @version: 
 * @Author: linPing
 * @Date: 2019-10-29 12:25:00
 * @LastEditTime: 2019-11-04 17:13:53
 */



import React, { Fragment } from 'react';

import Toast, { DURATION } from 'react-native-easy-toast';
import GlobalStyles from "../res/styles/GlobalStyles";

import NavigationUtil from '../navigator/NavigationUtil'
import OffLineImagePick from "../common/OffLineImagePick";
import Icon from "../common/Images";
import AsyncStorageUtils from "../expand/AsyncStorage";
import SafeAreaViewPlus from "../common/SafeAreaViewPlus";
import VisibleView from "../common/VisibleView";
import { Button } from 'react-native-elements';
import ActionSheet from 'react-native-actionsheet';
var dismissKeyboard = require('dismissKeyboard');
import {
    SafeAreaView,
    StyleSheet,
    View,
    Text,
    StatusBar,
    TextInput,
    Alert,
    Dimensions,
    ImageBackground,
    Animated,
    KeyboardAvoidingView,

} from 'react-native';
import {BackHandler} from 'react-native'
import {bindBackExitApp,removeBackExitApp} from '../component/androidBack'
const { width, height } = Dimensions.get('window')
// import { TouchableOpacity } from 'react-native-gesture-handler';

export default class LoginPage extends React.Component {
    constructor(props) {
        super(props)
        this.spinValue = new Animated.Value(0)
        this.spinYalue = new Animated.Value(0)
        this.fromValue = new Animated.Value(0)
        this.fromYalue = new Animated.Value(0)
        this.state = {
            isLoading: false,
            loginHide:true,
            roleList:[],
            userName: '18516035775',
            userPassword: '111111'
        }
        console.disableYellowBox = true
     
    
   
    }
 
    componentDidMount(){
        this.spin()
        bindBackExitApp()
    
        BackHandler.addEventListener('hardwareBackPress',this.onBackPress)
       
      }
    
      componentWillUnmount(){
        removeBackExitApp()
        BackHandler.removeEventListener('hardwareBackPress',this.onBackPress)
      }
    
      /**
       * 物理 Android 中的物理返回键
       * @returns {boolean}
       * **/
    
       onBackPress =()=>{
         
         const {dispatch,navigation} =this.props
    
         if(!global.navigation){
           return false
    
         }else{
          NavigationUtil.goBack(global.navigation || this.props.navigation)
          return true
         }
        
       }
     
    spin() {
        this.spinValue.setValue(0)
        Animated.timing(
            this.spinValue,
            {
                toValue: 1,
                duration: 1000,
                delay: 300

            }
        ).start() // 一轮动画完成后的回调，这里传spin可以形成无限动画

        Animated.timing(
            this.spinYalue,
            {
                toValue: 10,
                duration: 1000,
                delay: 300
            }
        ).start()

        Animated.timing(
            this.fromValue,
            {
                toValue: 1,
                duration: 1000,
                delay: 0
            }
        ).start()

        // Animated.timing(
        //     this.fromYalue,
        //     {
        //         toValue: 10,
        //         duration: 1000,
        //         delay: 0
        //     }
        // ).start()
    }

    textEvent(){
        const {
            userName,
            userPassword,
        } = this.state;

        if(userName.length===11 && userPassword.length>=6){
            this.setState({
                loginHide:false
            })
        }else{
            this.setState({
                loginHide:true
            })
        }
    }

    signIn(){
        dismissKeyboard()
        this.setState({
            isLoading:true
        })
        setTimeout(()=>{
            
            this.setState({
                roleList:["督察员","教师"]
            })
            this.ActionSheet.show()
            
            this.setState({
                isLoading:false,
            })
           
         
        },100)
    }
    
    roleLogin(index){
        this.setState({
            isLoading:true,
        })
        const { navigation } = this.props
        //navigation.navigate('Main')
        setTimeout(()=>{
            NavigationUtil.resetToHomePage({navigation})
         
        },0)
    
        
    }
    
    render() {

        const {
            userName,
            userPassword,
            isLoading,
            loginHide,
            roleList
        } = this.state;


    
        return (

            <ImageBackground style={{ height:height,flex:1, }}
            
                source={Icon.Login.login_bg}>
                      <StatusBar backgroundColor={'#8cafd4'}  translucent={true}/>
   
                <Text style={styles.overlay} >

                </Text>
                    
                <View style={{ }}>
                <KeyboardAvoidingView behavior='position'>
                    <View style={styles.connect} >
               

                        <Animated.View style={{ padding: 40, marginTop: 40,  opacity: this.spinValue, translateY: this.spinYalue}}>
                        {/* <Animated.View style={{ padding: 40, marginTop: 40}}> */}
                            <Text style={{ color: "#fff", fontSize: 30, fontWeight: "100", lineHeight: 50 }}>欢迎使用</Text>
                            <Text style={{ color: "#fff", fontSize: 27, lineHeight: 50 }}>LabVision</Text>
                            <Text style={{ color: "#fff", fontSize: 30, lineHeight: 50 }}>实验室安全巡检系统</Text>

                        </Animated.View>


                        <Animated.View style={[styles.container,{opacity: this.fromValue,}]}>
                            <View style={styles.loginForm}>
                                <Text style={styles.label}>账号</Text>

                                <TextInput
                                    placeholder='请输入手机号'
                                    disabled={isLoading}
                                    maxLength={11}
                                    clearButtonMode={"while-editing"}
                                    autoCapitalize={'none'}
                                    keyboardType={"numeric"}
                                    autoCorrect={false}
                                    style={styles.inputField}
                                    underlineColorAndroid='transparent'
                                    placeholderTextColor="rgba(255,255,255,0.2)"
                                    onChangeText={(text) => {
                                    
                                        const newText = text.replace(/[^\d]+/, '');
                                        //可以打印看看是否过滤掉了非数字
                                        this.setState({ userName: newText },()=>{
                                            this.textEvent()
                                        })
                                  
                                    }}
                                    value={this.state.userName}
                                />
                            </View>
                            <View style={styles.loginForm}>
                           
                                <Text style={styles.label}>密码</Text>

                                <TextInput
                                    placeholder='请输入密码'
                                    disabled={isLoading}
                                    placeholderTextColor="rgba(255,255,255,0.2)"
                                    clearButtonMode={"while-editing"}
                                    // placeholderFonttWeight="100"
                                    autoCapitalize={'none'}
                                    password={true}
                                    autoCorrect={false}
                                    secureTextEntry={true}
                                    style={styles.inputField}
                                    underlineColorAndroid='transparent'
                                    onChangeText={(text) => {
                                      
                                        this.setState({ userPassword: text },()=>{
                                            this.textEvent()
                                        })
                                       
                                        }}
                                    value={this.state.userPassword}
                                />
                               
                            </View>

                            <Button
                                buttonStyle={styles.loginButton}
                                containerStyle={{ marginTop: 32, flex: 0 }}
                                activeOpacity={0.8}
                                title={"登录"}
                                onPress={() => {this.signIn() }}
                                titleStyle={styles.loginTextButton}
                                loading={isLoading}
                                disabled={isLoading || loginHide}
                                disabledStyle={{backgroundColor:"rgba(255,255,255,0.3)"}}
                                disabledTitleStyle={{opacity:0.9}}
                            />


                        </Animated.View>
                      
                    </View>
            
                  
                </KeyboardAvoidingView>
                </View>
                <Toast
                        ref={o=>this.toast=o}
                        position={'bottom'}
                        positionValue={130}
                        fadeInDuration={800}
                        fadeOutDuration={400}
                        opacity={0.7}
                    />
            <ActionSheet
                    ref={o => this.ActionSheet = o}
                    title={'选择登录角色'}
                    options={[<Text style={{ color: 'red' }}>取消</Text>,...roleList]}
                     cancelButtonIndex={0}
                    //   destructiveButtonIndex={1}
                    onPress={(index) => {
                   
                        if(index===0) return false
                       
                       this.roleLogin(index)
                    }}
                />
            </ImageBackground>
       
         
        )
    }

};


const styles = StyleSheet.create({
    connect:{paddingBottom:30},
    overlay: {

        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        opacity: 0.1,
     
        backgroundColor: '#000'
    },
    container: {
        // flex: 1,
        alignSelf:"center",
        //  justifyContent: 'center',
        //  backgroundColor:"red",
        width:width-100,
        marginTop:10,
      
    },
    loginForm: {
        // flex: 1,
        // flexDirection:'column',
         marginBottom:20,
        // alignItems:'center',
        // color:"#fff"
   
    },
    label:{
        fontSize:18,
        color:"#fff"
    },
    loginTextButton:{
        fontSize:18,
    },
    inputField: {
         height:45,
         lineHeight:20,
        // letterSpacing:2,
        // backgroundColor:"red",
        paddingVertical:5,
        fontSize:18,
        color:"#fff",
        fontWeight:"100",
        borderBottomWidth:1,
        // paddingHorizontal:6,
        borderColor:'#FFF',
    },
});

